<template>
	<div class="product-list-panel">
		<div class="product-search" v-if="!list">
			<input type="text" v-model="searchValue" @keypress="handleChangeSearchProduct" placeholder="搜索商品关键字" />
			<i class="mintui mintui-search" @click="handleSearchKeywords"></i>
		</div>
		<h3 class="classify-title" v-if="!!classifyName">
			<span>——</span>
			<span>&nbsp;&nbsp;&nbsp;&nbsp;{{classifyName}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
			<span>——</span>
		</h3>
		<div class="sort" v-if="!list">
			<span :class="{'active': orderType == 'addTim'}" @click="handleChangeSort('addTim')">默认</span>
			<span :class="{'active': orderType == 'store_price'}" @click="handleChangeSort('store_price')">价格</span>
			<span :class="{'active': orderType == 'goods_salenum'}" @click="handleChangeSort('goods_salenum')">销量</span>
			<span :class="{'active': orderType == 'goods_collect'}" @click="handleChangeSort('goods_collect')">人气</span>
			<span @click="handleChangeSortType(isDesc ? 'asc' : 'desc')">{{isDesc ? '升序' : '降序'}}</span>
		</div>
		<!--<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">-->
		<div class="cl">
			<router-link v-if="!!productList" v-for="item in productList" :key="item.name" :to="{path: '/product_detail?id=' + item.id}" class="product-item">
				<div class="product-img">
					<img :src="item.goods_main_photo" />
				</div>
				<div class="product-info">
					<p class="product-name">
						<!--<i class="iconfont icon-hot"></i>-->
						{{item.name}}
					</p>
					<p class="product-salle" v-if="item.produtType == '1'">
						<span class="product-price">{{item.goods_current_price}}</span>
						<span>成交笔数：{{item.goods_salenum}}</span>
					</p>
					<p class="product-salle" v-if="item.produtType == '2'">
						<span class="product-num">{{item.goods_current_price}}积分</span>
					</p>
				</div>
			</router-link>
		</div>
		<div v-if="!isLoadingMore && ($route.query.id || $route.query.type || $route.query.keywords)" class="loading-more" @click="loadingMore">
			点击加载更多...
		</div>
		<!--</mt-loadmore>-->
	</div>
</template>

<script>
	export default {
		name: 'product-list',
		props: ['list'],
		data() {
			return {
				orderType: 'addTim',
				searchValue: '',
				classifyName: '',
				allLoaded: false,
				productList: [],
				isDesc: true,
				currentPage: 1,
				isLoadingMore: false
			}
		},
		methods: {
			getProductList() {
				this.isLoadingMore = true;
				this.$http.post('/mobileindex/store_goods_list.htm', {
					gc_id: this.$route.query.id == 'null' ? '' : this.$route.query.id,
					currentPage: this.currentPage
				}).then(res => {
					this.isLoadingMore = false;
					if(res.code == 0) {
						if(res.data.length < 20) {
							this.isLoadingMore = true;
						}
						if(this.productList.length == 0) {
							this.productList = res.data;
						} else {
							for(var i = 0, len = res.data.length; i < len; i++) {
								this.productList.push(res.data[i]);
							}
						}
					}
				})
			},
			getSearchData(keywords, type, orderType, sort) {
				this.isLoadingMore = true;
				this.$http.post('/mobileindex/search.htm', {
					keyword: keywords,
					currentPage: this.currentPage,
					orderType: orderType,
					store_price_begin: '',
					store_price_end: '',
					orderBy: sort,
					produtType: type
				}).then(res => {
					this.isLoadingMore = false;
					if(res.code == 0) {
						if(type == 1) {
							var data = res.data.dataList;
						} else {
							var data = res.data;
						}

						if(data.length < 20) {
							this.isLoadingMore = true;
						}
						if(this.productList.length == 0) {
							this.productList = data;
						} else {
							for(var i = 0, len = data.length; i < len; i++) {
								this.productList.push(data[i]);
							}
						}
					}
				})
			},
			handleChangeSort(orderType) {
				this.currentPage = 1;
				this.orderType = orderType;
				this.getSearchData(this.searchValue, this.$route.query.type || 1, orderType, this.sort);
			},
			handleChangeSortType(sortType) {
				this.currentPage = 1;
				this.sort = sortType;
				this.isDesc = !this.isDesc;
				this.getSearchData(this.searchValue, this.$route.query.type || 1, this.orderType, this.sort);
			},
			handleChangeSearchProduct(e) {
				var keycode = e.keyCode;
				//获取搜索框的值
				if(keycode == '13') {
					e.preventDefault();
					//请求搜索接口
					this.handleSearchKeywords();
				}
			},
			handleSearchKeywords() {
				this.orderType = 'addTim';
				this.sort = true;
				this.getSearchData(this.searchValue, this.$route.query.type || 1, 'addTim', 'asc');
			},
			loadBottom() {
				if(this.$route.query.id) {
					this.currentPage++;
					this.getProductList(() => {
						this.allLoaded = true;
					})
				}
			},
			loadingMore() {
				this.currentPage++;
				if(this.$route.query.keywords) {
					this.getSearchData(this.searchValue, this.$route.query.type || 1, this.orderType, this.sort);
				} else if(this.$route.query.type) {
					this.getSearchData(this.searchValue, this.$route.query.type || 1, this.orderType, this.sort);
				} else {
					this.getProductList();
				}
			}
		},
		created() {
			if(this.$route.query.id) {
				this.classifyName = this.$route.query.name
				this.getProductList();
			} else if(this.$route.query.keywords) {
				this.classifyName = this.$route.query.keywords
				this.getSearchData(this.$route.query.keywords, 1, 'addTim', 'asc')
			} else if(this.$route.query.type) {
				this.classifyName = '积分商品';
				this.getSearchData('', 2, 'addTim', 'asc')
			} else {
				var _this = this;
				setTimeout(() => {
					_this.productList = _this.list;
				}, 1000);
			}
		}
	}
</script>

<style lang="less" scoped>
	.product-list-panel {
		padding: 0.1rem;
		.product-search {
			width: 90%;
			margin: 0.2rem auto;
			position: relative;
			input {
				width: 100%;
				padding: 0.2rem;
				box-sizing: border-box;
				border-radius: 6px;
				border: 1px solid #DDDDDD;
			}
			i {
				position: absolute;
				right: 0.2rem;
				top: 0.2rem;
			}
		}
		.sort {
			display: flex;
			border-top: 1px solid #DDDDDD;
			border-bottom: 1px solid #DDDDDD;
			line-height: 0.8rem;
			span {
				flex: 1;
				text-align: center;
				border-bottom: 2px solid transparent;
				&.active {
					border-color: #E4393C;
				}
			}
		}
		.product-item {
			/*float: left;*/
			display: inline-block;
			width: 50%;
			padding: 0.2rem;
			box-sizing: border-box;
			.product-img {
				img {
					display: block;
					max-width: 100%;
				}
			}
			.product-info {
				.product-name {
					margin-top: 0.1rem;
					font-size: 0.24rem;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					.iconfont {
						color: #E4393C;
					}
				}
				.product-salle {
					margin-top: 0.1rem;
					font-size: 0.24rem;
					.product-price {
						color: #E4393C;
						padding-right: 0.1rem;
						&:before {
							content: "￥";
							font-size: 0.16rem;
						}
					}
					.product-num {
						color: #E4393C;
					}
					span {
						color: #9F9F9F;
					}
				}
			}
		}
		.classify-title {
			font-weight: normal;
			font-size: 0.32rem;
			margin: 0;
			line-height: 1rem;
			display: flex;
			align-items: center;
			justify-content: center;
			span {
				display: block;
				&:first-child,
				&:last-child {
					color: #DFDFDF;
				}
			}
		}
		&:after {
			display: block;
			content: "";
			clear: both;
		}
		.cl {
			clear: both;
			&:after {
				display: block;
				content: "";
				clear: both;
			}
		}
		.loading-more {
			border: 1px solid #DDDDDD;
			border-left: none;
			border-right: none;
			text-align: center;
			line-height: 0.6rem;
		}
	}
</style>